<template>
	<view>
		<login @login="login"></login>

		<swiper :style="{height:swiperHeight + 'px'}" @change='changSwiper' :current="tabBarListIndex">
			<!-- 首页 -->
			<swiper-item>
				<view>
					<view class="bannar">
						<swiper class="swiper" autoplay="true" circular="true" interval="5000" duration="2000">
							<swiper-item v-for="(item,index) of bannerList" :key="index" @click="bannerClick(item)">
								<image class="swiper_icon" :src="item.url" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
						<view class="home_top_tab">
							<view class="home_top_tab_one" v-for="(item,index) of homeTopTabList" :key="index" @click="changeHomeTopTab(index,item.id)">
								<text class="home_top_tab_one_name" :class="{home_top_tab_one_name_active:homeTopTabListIndex==index}">{{item.name}}</text>
								<text class="home_top_tab_one_line" :class="{home_top_tab_one_line_active:homeTopTabListIndex==index}"></text>
							</view>
						</view>
					</view>
					<scroll-view v-if="scrollHeight != ''" scroll-y="true" :style="{height:scrollHeight + 'px'}" refresher-enabled="true"
					 refresher-threshold='45' :refresher-triggered="refresheStatus" @refresherrefresh="refresherrefresh"
					 @scrolltolower="loadMore">
						<view class="home_top_tab_content">
							<none-data v-if="homeListTotal == 0"></none-data>
							<view class="home_top_tab_content_one" v-if="homeListTotal > 0" v-for="(item,index) of homeList" :key="index">
								<view class="share_all" @click="shareThisOne(item)">
									<image class="share_icon" src="/static/images/share.png" mode=""></image>
								</view>

								<view class="home_top_tab_content_one_avatar_cell">
									<view class="home_top_tab_content_one_avatar_nickname">
										<image class="home_top_tab_content_one_avatar" :src="item.avatar"></image>
										<text class="home_top_tab_content_one_nickname">{{item.nickname}}</text>
									</view>
									<image class="home_top_tab_content_one_cell_icon" src="/static/images/home/cell.png" mode="" @click="cell(item.phone)"></image>
								</view>

								<view class="home_top_tab_content_one_place_num">
									<view class="home_top_tab_content_one_num">
										<text class="home_top_tab_content_one_num_name" v-if="homeTopTabListIndex == 0">座位数：</text>
										<text class="home_top_tab_content_one_num_name">{{item.quantity}}人</text>
									</view>
									<view class="home_top_tab_content_one_place_num_clock">
										<image class="home_top_tab_content_one_place_num_clock_icon" src="../../static/images/home/clock.png" mode=""></image>
										<text class="home_top_tab_content_one_place_num_clock_time">{{item.departureTime}}</text>
									</view>
									<view class="home_top_tab_content_one_place_num_clock">
										<text class="home_top_tab_content_one_place_dot"></text>
										<text class="home_top_tab_content_one_place_num_clock_time">{{item.departurePlace}}</text>
									</view>
									<view class="home_top_tab_content_one_place_num_clock">
										<text class="home_top_tab_content_one_place_dot_"></text>
										<text class="home_top_tab_content_one_place_num_clock_time">{{item.destination}}</text>
									</view>
								</view>

								<view class="home_top_tab_content_one_route_ps">
									<text class="home_top_tab_content_one_route list" v-if="homeTopTabListIndex == 0 && (item.pass != '' && item.pass != null)">途经：{{item.pass}}</text>
									<text class="home_top_tab_content_one_ps  list" v-if="item.remark!='' && item.remark!=null">备注：{{item.remark}}</text>
								</view>
							</view>

						</view>
					</scroll-view>
				</view>
			</swiper-item>

			<!-- 通讯录 -->
			<swiper-item>
				<view class="user_all">
					<contacts ref="contactInfo" @handlePhoneSelected='handlePhoneSelected'></contacts>
				</view>
			</swiper-item>

			<!-- 排行榜 -->
			<swiper-item>
				<rank ref="userRanks"></rank>
			</swiper-item>

			<!-- 个人中心 -->
			<swiper-item>
				<view class="user_all">
					<view class="user_head" v-if="status != null">
						<image class="user_avatar" :src="avatar"></image>
						<text class="user_nickname">{{nickname}}</text>
					</view>
					<view class="user_head" v-if="status == null">
						<image class="user_avatar user_avatar_default" src="../../static/images/home/userN1.png"></image>
						<text class="user_nickname" @click="loginRightNow">立即登录</text>
					</view>
					<view class="user_function_one" v-for="(item,index) of userFunctionList" :key="index" @click="goUserFunction(item.url,index)">
						<view class="user_function_one_icon_title">
							<image class="user_function_one_icon" :src="item.icon" mode=""></image>
							<text class="user_function_one_title">{{item.name}}</text>
						</view>
						<image class="more_icon" src="../../static/images/more.png" mode=""></image>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="tabBar">
			<view class="tabBar_contnet">
				<view class="tabBar-branch">
					<view class="tabBar_one" v-for="(item , index) of tabBarList1" :key="index" @click="changeTab(index)">
						<image class="tabBar_one_icon" :src="index == tabBarListIndex ? item.icon:item.iconN" mode=""></image>
						<text class="tabBar_one_name" :class="{tabBar_one_name_active : index == tabBarListIndex}">{{item.name}}</text>
					</view>
				</view>
				<image class="release_icon" src="/static/images/tabBar/release.png" mode="" @click="releaseBtn"></image>
				<view class="tabBar-branch">
					<view class="tabBar_one" v-for="(item , index) of tabBarList2" :key="index" @click="changeTab(index + tabBarList.length/2)">
						<image class="tabBar_one_icon" :src="index + tabBarList.length/2 == tabBarListIndex ? item.icon:item.iconN" mode=""></image>
						<text class="tabBar_one_name" :class="{tabBar_one_name_active : index + tabBarList.length/2 == tabBarListIndex}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="share_all_pic">
			<canvas style="width: 1000px; height: 800px;background-color: #FFFFFF" canvas-id="firstCanvas"></canvas>
		</view>

		<uni-popup ref="popupIcon" type="center">
			<image class="popup_icon" :src="popupIcon" mode="aspectFit"></image>
		</uni-popup>
		<!-- 轮播图片弹框 -->
		<uni-popup ref="bannerImage" type="center">
			<view>
				<image class="popup_icon" :src="bannerImageUrl" mode="aspectFit"></image>
				<button class="saveImageBtn" @click="saveImageToSelf">{{saveImageLoading ? '图片保存中...':'保存图片'}}</button>
			</view>
		</uni-popup>
		<!-- 图片授权弹框 -->
		<uni-popup ref="authImage" type="center">
			<!-- <view class="toAuth">需重新进行图片授权</view> -->
			<button open-type="openSetting" style="width: 360upx;" class="saveImageBtn">重新授权</button>
		</uni-popup>

		<uni-popup ref="sharepic" type="center">
			<view class="share_popup">
				<text class="share_tip">分享行程可获得更多关注哦！</text>
				<button class="share_btn" style="background-color: #4688FF;color: #FFFFFF;" type="default" open-type="share">分享</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupCell" type="center">
			<view class="popup_cell">
				<text class="popup_cell_title">{{popupTitle}}</text>
				<view class="popup_cell_one" @click="checkOnePhone(1)">
					<image class="popup_cell_one_icon" src="/static/images/home/cell.png" mode=""></image>
					<text class="popup_cell_one_phone">{{tellone}}</text>
				</view>
				<view class="popup_cell_one" @click="checkOnePhone(2)">
					<image class="popup_cell_one_icon" src="/static/images/home/cell.png" mode=""></image>
					<text class="popup_cell_one_phone">{{telltwo}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import login from "@/components/login.vue";
	import buyModele from "@/components/buy-modele.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import noneData from '@/components/none-data.vue';
	import contacts from '@/components/contacts/index.vue'
	import rank from '@/components/rank/index.vue'
	import {
		bannarData,
		userPhone,
		homeListData,
		userStatus,
		typeData
	} from "@/Service/homeService.js";
	import {
		wxLogin
	} from '@/Service/login.js';
	export default {
		components: {
			login,
			buyModele,
			uniPopup,
			noneData,
			contacts,
			rank
		},
		data() {
			return {
				isShowLogin: false,
				tabBarList: [{
						"icon": "../../static/images/tabBar/home.png",
						"iconN": "../../static/images/tabBar/homeN.png",
						"name": "首 页",
						"title": "恒行通"
					},
					{
						"icon": "../../static/images/tabBar/contacts.png",
						"iconN": "../../static/images/tabBar/contactsN.png",
						"name": "通讯录",
						"title": "社区便民通讯录"
					},
					{
						"icon": "../../static/images/tabBar/rank.png",
						"iconN": "../../static/images/tabBar/rankN.png",
						"name": "排行榜",
						"title": "发布排行Top20"
					},
					{
						"icon": "../../static/images/tabBar/user.png",
						"iconN": "../../static/images/tabBar/userN.png",
						"name": "我 的",
						"title": "个人中心"
					}
				],
				tabBarList1: [],
				tabBarList2: [],
				//底部tab数据
				tabBarListIndex: 0,
				swiperHeight: '',
				scrollHeight: '',

				homeTopTabList: [], //首页顶部tab
				homeTopTabListIndex: 0,
				homeTopTabId: 0, //首页发布信息列表数据id
				homeList: [], //首页发布信息列表数据
				homeListTotal: 0, //数据总条数
				currentPage: 1,
				size: 10,
				refresheStatus: false, //下拉刷新状态
				bannerList: [], //首页bannar	

				popupIcon: null, //首页弹窗数据

				status: null, //用户状态
				avatar: '', //用户头像
				nickname: '', //用户昵称
				
				popupTitle: '',
				tellone: '',
				telltwo: '',
				
				userFunctionList: [{
						"icon": "/static/images/user/user1.png",
						"name": "我的发布",
						"url": "/pages/userPage/myRelease/myRelease"
					},
					{
						"icon": "/static/images/user/user2.png",
						"name": "模板管理",
						"url": "/pages/userPage/myTPM/myTPM"
					},
					{
						"icon": "/static/images/user/user3.png",
						"name": "联系客服",
						"url": "/pages/userPage/customerService/customerService"
					},
					{
						"icon": "/static/images/user/user4.png",
						"name": "关于我们",
						"url": "/pages/userPage/aboutUs/aboutUs"
					}
				],


				bannerImageUrl: '', // 轮播图片弹框
				saveImageLoading: false, // 保存图片loading
				carpoolInfoId: '',
				type: '',
				isfirst: 0,

				pic: null,
				infoId: '',
			}
		},
		onLoad(option) {
			if(option.tabListIndex){
				this.tabBarListIndex = option.tabListIndex
			}
			this.disposeTableBar();
			if (option.carpoolInfoId) {
				this.carpoolInfoId = option.carpoolInfoId
				this.type = option.type
				this.homeTopTabListIndex = option.type
				this.homeTopTabId = option.type
			}
			this.getBannarData()
			this.getTypeData()
		},
		onShow() {
			this.isfirst++
			if (this.isfirst > 1) {
				this.currentPage = 1
				this.homeList = []
				this.getHomeList()
			}

			this.getUserStatus();

			// 显示的时候关闭授权弹框
			this.$refs.authImage.close();
		},
		onReady() {
			this.getHeight()
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {
			tabBarListIndex(e) {
				let pageName = this.tabBarList[e].title
				uni.setNavigationBarTitle({
					title: pageName
				})
			},
			userInfo(e) {
				this.avatar = e.avatar
				this.nickname = e.nickname
				this.status = 0
			}
		},
		methods: {
			// 点击轮播
			bannerClick(item) {
				let linkUrl = item.linkUrl;
				if (!linkUrl) {
					return
				} else if (/[\.jpg|\.png|\.jpeg|\.gif|\.bmp]$/.test(linkUrl)) {
					this.bannerImageUrl = linkUrl;
					this.$refs.bannerImage.open();
				} else {
					uni.navigateTo({
						url: linkUrl
					});
				}
			},
			//处理tablebar
			disposeTableBar() {
				let length = this.tabBarList.length;
				this.tabBarList1 = this.tabBarList.slice(0, length / 2);
				this.tabBarList2 = this.tabBarList.slice(length / 2, length);
			},

			// 保存图片
			saveImageToSelf() {
				let imageUrl = this.bannerImageUrl;
				let _this = this;
				// 防止重复点击保存
				if (this.saveImageLoading) return
				this.saveImageLoading = true;
				uni.getSetting({
					success(res) {
						let auth = res.authSetting['scope.writePhotosAlbum'];
						if (auth === undefined || auth) {
							downloadImage(imageUrl);
						} else {
							_this.saveImageLoading = false;
							_this.$refs.authImage.open();
						}
					}
				});

				function downloadImage(imageUrl) {
					uni.downloadFile({
						url: imageUrl,
						success: function(res) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(data) {
									_this.saveImageLoading = false;
									uni.showToast({
										title: "保存成功",
										icon: "success",
										duration: 2000
									});
								},
								fail: function(err) {
									_this.saveImageLoading = false;
									console.log(err);
								},
							});
						}
					});
				}
			},
			//下拉刷新
			refresherrefresh() {
				let self = this
				self.refresheStatus = true
				self.currentPage = 1
				self.homeList = []
				self.getHomeList()
				setTimeout(function() {
					self.refresheStatus = false
				}, 1000);
			},
			//上拉加载
			loadMore() {
				if (this.homeList.length < this.homeListTotal) {
					this.currentPage++
					this.getHomeList()
				} else {
					console.log('没有更多数据了')
				}
			},
			//获取和设置高度
			getHeight() {
				let self = this
				uni.getSystemInfo({
					success: function(res) { // res - 各种参数
						let info = uni.createSelectorQuery().select(".tabBar");
						info.boundingClientRect(function(data) {
							self.swiperHeight = res.windowHeight - parseInt(data.height)
						}).exec()
						let scorllviewInfo = uni.createSelectorQuery().select(".bannar");
						scorllviewInfo.boundingClientRect(function(ret) {
							self.scrollHeight = self.swiperHeight - parseInt(ret.height)
						}).exec()

					}
				});
			},

			//需要登录
			needLogin() {
				this.$store.dispatch("noLogin", !this.$store.state.noLogin)
			},

			//点击立即登录
			loginRightNow() {
				let self = this
				uni.login({
					provider: "weixin",
					success: (login_ret => {
						let params = {
							code: login_ret.code,
						}
						wxLogin(params).then((userlogin) => {
							if (userlogin.data.code == 0) {
								uni.setStorageSync('token', userlogin.data.data.token)
								uni.setStorageSync('phone', userlogin.data.data.phone)
								uni.setStorageSync('avatar', userlogin.data.data.avatar)
								uni.setStorageSync('nickname', userlogin.data.data.nickname)
								let userInfo = {
									avatar: userlogin.data.data.avatar,
									nickname: userlogin.data.data.nickname,
									phone: null,
								}
								self.$store.dispatch('userInfo', userInfo)
								self.status = 0
							}
							if (userlogin.statusCode == 403) {
								self.$store.dispatch("noLogin", !self.$store.state.noLogin)
							}
						}).catch((error) => {
							console.log(error)
						})
					})
				})
			},

			//登录回调
			login(e) {
				console.log(e)
			},

			//切换底部tab
			changeTab(index) {
				this.tabBarListIndex = index
			},

			//监听底部tab的swiper切换
			changSwiper(e) {
				this.tabBarListIndex = e.detail.current
				//当swiper滑动到便民通讯录的时候，去请求数据
				if (this.tabBarListIndex === 1) {
					if(this.$refs.contactInfo.list.length <= 0){
						//获取数据
						this.$refs.contactInfo.getPublicInfoData()
					}
				}
				if (this.tabBarListIndex === 2) {
					if(this.$refs.userRanks.personRank == null) {
						this.$refs.userRanks.getUserRanks()
					}
				}
			},
			
			handlePhoneSelected(item) {
				console.log("打电话了")
				if (item.tel2 == null || item.tel2 == "") {
					this.cell(item.tel1)
				} else {
					this.popupTitle = item.name;
					this.tellone = item.tel1;
					this.telltwo = item.tel2;
					this.$refs.popupCell.open();
				}
			},
			
			cell(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				});
			},
			
			checkOnePhone(num) {
				if (num == 1) {
					this.cell(this.tellone)
				} else {
					this.cell(this.telltwo)
				}
			},

			//点击发布
			releaseBtn() {
				let self = this
				userStatus().then((ret) => {
					if (ret.code == 0) {
						uni.navigateTo({
							url: "/pages/releasePage/releaseNew/releaseNew?typeList=" + JSON.stringify(self.homeTopTabList)
						})
					}
				}).catch((err) => {
					if (err.statusCode == 401) {
						uni.login({
							provider: "weixin",
							success: (login_ret => {
								let params = {
									code: login_ret.code,
								}
								wxLogin(params).then((userlogin) => {
									if (userlogin.data.code == 0) {
										uni.setStorageSync('token', userlogin.data.data.token)
										uni.setStorageSync('phone', userlogin.data.data.phone)
										uni.setStorageSync('avatar', userlogin.data.data.avatar)
										uni.setStorageSync('nickname', userlogin.data.data.nickname)
										uni.navigateTo({
											url: "/pages/releasePage/releaseNew/releaseNew?typeList=" + JSON.stringify(self.homeTopTabList)
										})
									}
									if (userlogin.statusCode == 403) {
										self.$store.dispatch("noLogin", !self.$store.state.noLogin)
									}
								}).catch((error) => {
									console.log(error)
								})
							})
						})
					}
				})
			},

			//去我的功能页面
			goUserFunction(url, index) {
				let self = this
				if (index < 3) { //需要登录
					userStatus().then((ret) => {
						if (ret.code == 0) {
							uni.navigateTo({
								url: url
							})
						}
					}).catch((err) => {
						if (err.statusCode == 401) {
							uni.login({
								provider: "weixin",
								success: (login_ret => {
									let params = {
										code: login_ret.code,
									}
									wxLogin(params).then((userlogin) => {
										if (userlogin.data.code == 0) {
											uni.setStorageSync('token', userlogin.data.data.token)
											uni.setStorageSync('phone', userlogin.data.data.phone)
											uni.setStorageSync('avatar', userlogin.data.data.avatar)
											uni.setStorageSync('nickname', userlogin.data.data.nickname)
											uni.navigateTo({
												url: url
											})
										}
										if (userlogin.statusCode == 403) {
											self.$store.dispatch("noLogin", !self.$store.state.noLogin)
										}
									}).catch((error) => {
										console.log(error)
									})
								})
							})
						}
					})
					// uni.getSetting({
					//     success: (res_power) =>{ 
					//         if (res_power.authSetting['scope.userInfo']) { //用户已授权,			
					//         }else{ //用户还未授权过
					// 			console.log('未授权')
					// 			self.$store.dispatch("noLogin",!self.$store.state.noLogin)
					//         }
					//     }
					// })
				} else if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},

			//切换首页顶部tab
			changeHomeTopTab(index, id) {
				if (this.homeTopTabListIndex == index) {
					return
				}
				this.homeTopTabListIndex = index
				this.homeTopTabId = id
				this.homeList = []
				this.currentPage = 1
				this.getHomeList()
			},


			//获取bannar数据
			getBannarData() {
				bannarData().then((ret) => {
					this.bannerList = ret.data.banners
					this.popupIcon = ret.data.popImg.url
					if (this.popupIcon != '' && this.popupIcon != null) {
						this.$refs.popupIcon.open();
					}
				}).catch((err) => {
					console.log(err)
				})
			},

			//获取类型数据
			getTypeData() {
				typeData().then((ret) => {
					this.homeTopTabList = ret.data
					this.homeTopTabId = ret.data[0].id
					if (this.carpoolInfoId != '') {
						this.homeTopTabId = this.type
					}
					this.getHomeList()
					this.$store.dispatch('typeData', ret.data)
				}).catch((err) => {
					console.log(err)
				})
			},

			//获取首页发布的信息数据
			getHomeList() {
				let params = {
					carpoolType: this.homeTopTabId,
					currentPage: this.currentPage,
					size: this.size,
					carpoolInfoId: this.carpoolInfoId
				}
				homeListData(params).then((ret) => {
					this.homeListTotal = ret.data.total
					this.homeList.push(...ret.data.records)
				}).catch((err) => {
					console.log(err)
				})
			},

			//拨打电话
			cell(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},

			//查看用户是否有登录缓存
			getUserStatus() {
				if (uni.getStorageSync("avatar")) {
					let userInfo = {
						avatar: uni.getStorageSync("avatar"),
						nickname: uni.getStorageSync("nickname"),
						phone: null,
					}
					this.$store.dispatch('userInfo', userInfo)
					this.status = 0
				}
			},

			//普通toast
			Toast(e) {
				uni.showToast({
					title: e,
					icon: 'none',
					duration: 2000
				});
			},
			ToastSuccess(e) {
				uni.showToast({
					title: e,
					icon: 'success',
					duration: 2000
				});
			},

			shareThisOne(item) {
				uni.showLoading({
					title: '加载中'
				});
				this.infoId = item.id
				var ctx = uni.createCanvasContext('firstCanvas')
				var titlecolor = '#757575'
				var wordcolor = '#000000'
				var fontSize = 60

				var titlepadding = 40
				var wordleftpadding = 300
				var toppadding = 100
				var toppaddingOne = 30
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, 1000, 800);
				ctx.textAlign = 'left' // 设置位置

				ctx.setFontSize(fontSize); // 类型
				ctx.setFillStyle(titlecolor)
				ctx.fillText('类型', titlepadding, toppadding);
				ctx.setFontSize(fontSize)
				ctx.setFillStyle(wordcolor)
				var types = ''
				if (this.homeTopTabId == 0) {
					types = '车找人'
				} else {
					types = '人找车'
				}
				ctx.fillText(types, wordleftpadding, toppadding);

				ctx.setFontSize(fontSize) // 时间
				ctx.setFillStyle(titlecolor)
				ctx.fillText('时间', titlepadding, toppadding + toppaddingOne * 4 * 1);
				ctx.setFontSize(fontSize)
				ctx.setFillStyle(wordcolor)
				ctx.fillText(item.departureTime, wordleftpadding, toppadding + toppaddingOne * 4 * 1);

				ctx.setFontSize(fontSize) // 出发地
				ctx.setFillStyle(titlecolor)
				ctx.fillText('出发地', titlepadding, toppadding + toppaddingOne * 4 * 2);
				ctx.setFontSize(fontSize)
				ctx.setFillStyle(wordcolor)
				ctx.fillText(item.departurePlace, wordleftpadding, toppadding + toppaddingOne * 4 * 2);

				ctx.setFontSize(fontSize) // 目的地
				ctx.setFillStyle(titlecolor)
				ctx.fillText('目的地', titlepadding, toppadding + toppaddingOne * 4 * 3);
				ctx.setFontSize(fontSize) // 字体样式
				ctx.setFillStyle(wordcolor)
				ctx.fillText(item.destination, wordleftpadding, toppadding + toppaddingOne * 4 * 3);

				ctx.setFontSize(fontSize) // 人数
				ctx.setFillStyle(titlecolor)
				ctx.fillText('人数', titlepadding, toppadding + toppaddingOne * 4 * 4);
				ctx.setFontSize(fontSize)
				ctx.setFillStyle(wordcolor)
				ctx.fillText(item.quantity, wordleftpadding, toppadding + toppaddingOne * 4 * 4);

				ctx.setFontSize(fontSize) // 电话
				ctx.setFillStyle(titlecolor)
				ctx.fillText('电话', titlepadding, toppadding + toppaddingOne * 4 * 5);
				ctx.setFontSize(fontSize)
				ctx.setFillStyle(wordcolor)
				ctx.fillText(item.phone, wordleftpadding, toppadding + toppaddingOne * 4 * 5);

				ctx.setFillStyle('#FFFFFF')
				ctx.draw()
				let self = this
				setTimeout(function() {
					self.setPic()
				}, 500);
			},
			setPic() {
				let self = this
				let num = 100
				uni.canvasToTempFilePath({ // 把画布转化成临时文件
					x: 0,
					y: 0,
					destWidth: 1000,
					destHeight: 800,
					fileType: 'jpg', // 保存成的文件类型
					quality: 1, // 图片质量
					canvasId: 'firstCanvas', // 画布ID
					success(res) {
						self.pic = res.tempFilePath
						uni.hideLoading();
						self.$refs.sharepic.open();
					},
					fail(err) {
						uni.hideLoading();
						console.log(err)
					}
				})
			},

		},
		onShareAppMessage(e) {
			if (e.from == 'button') {
				return {
					title: '使用恒行通，出行更轻松！',
					path: '/pages/home/index?type=' + this.homeTopTabId + '&carpoolInfoId=' + this.infoId,
					imageUrl: this.pic,
				}

			} else {
				switch (this.tabBarListIndex) {
					case 0:
						return {
							title: '出行信息共享，方便你我他!',
							imageUrl: '/static/images/shareicon.jpg',
							path: '/pages/home/index'
						}
					case 1:
						return {
							title: '社区便民通讯录',
							path: '/pages/home/index?tabListIndex=1'
						}
					case 2:
						return {
							title: '信息发布排行榜Top20',
							path: '/pages/home/index?tabListIndex=2'
						}
					case 3:
						return {
							title: '出行信息共享，方便你我他!',
							imageUrl: '/static/images/shareicon.jpg',
							path: '/pages/home/index'
						}
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		font-family: Source Han Sans CN;
	}

	.toAuth {
		color: #FFFFFF;
		margin-bottom: 24upx;
	}

	.saveImageBtn {
		width: 580upx;
		font-size: 32upx;
		background: #4687FF;
		color: #FFFFFF;
		margin-top: 16upx;
	}

	.swiper {
		height: 350upx;
	}

	.swiper_icon {
		width: 750upx;
		height: 350upx;
	}


	.tabBar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 126upx;
		display: flex;
		align-items: flex-end;
	}

	.tabBar_contnet {
		background-color: #FFFFFF;
		height: 97upx;
		width: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.tabBar-branch {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-grow: 1;
	}

	.release_icon {
		margin-top: -35upx;
		width: 126upx;
		height: 126upx;
		flex-shrink: 0;
	}

	.tabBar_one {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tabBar_one_f {
		padding-right: 88upx;
	}

	.tabBar_one_s {
		padding-left: 88upx;
	}

	.tabBar_one_icon {
		width: 46upx;
		height: 46upx;
	}

	/* 	.user_avatar_default{
		background-color: #eeeeee;
	} */

	.tabBar_one_name {
		display: block;
		font-size: 26upx;
		color: #999999;
		margin-top: 6upx;
	}

	.tabBar_one_name_active {
		color: #4687FF;
	}


	.home_top_tab {
		padding: 25upx 0 20upx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.home_top_tab_one {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.home_top_tab_one_name {
		display: block;
		font-size: 32upx;
		color: #999999;
		line-height: 34upx;
	}

	.home_top_tab_one_name_active {
		color: #252525;
	}

	.home_top_tab_one_line {
		display: block;
		width: 40upx;
		height: 8upx;
		border-radius: 4upx;
		background-color: #F8F8F8;
		margin-top: 15upx;
	}

	.home_top_tab_one_line_active {
		background-color: #4687FF;
	}


	.home_top_tab_content {
		padding: 30upx;
	}

	.home_top_tab_content_one {
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 30upx 22upx 20upx 24upx;
		margin-bottom: 20upx;
		position: relative;
	}

	.home_top_tab_content_one_avatar_cell {
		padding-bottom: 25upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #F8F8F8;
	}

	.home_top_tab_content_one_avatar_nickname {
		display: flex;
		align-items: center;
	}

	.home_top_tab_content_one_avatar {
		width: 74upx;
		height: 74upx;
		border-radius: 50%;
	}

	.home_top_tab_content_one_nickname {
		display: block;
		font-size: 30upx;
		color: #343434;
		margin-left: 22upx;
	}

	.home_top_tab_content_one_cell_icon {
		width: 52upx;
		height: 52upx;
	}

	.home_top_tab_content_one_place_num {
		position: relative;
		height: 188upx;
		border-bottom: 2upx solid #F8F8F8;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.home_top_tab_content_one_num {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
	}

	.home_top_tab_content_one_num_name {
		display: block;
		font-size: 26upx;
		color: #9A9A9A;
	}

	.home_top_tab_content_one_place_num_clock {
		display: flex;
		align-items: center;
	}

	.home_top_tab_content_one_place_num_clock_icon {
		width: 16upx;
		height: 16upx;
	}

	.home_top_tab_content_one_place_num_clock_time {
		display: block;
		font-size: 26upx;
		color: #343434;
		margin-left: 25upx;
		line-height: 26upx;
	}

	.home_top_tab_content_one_place_dot {
		display: block;
		width: 14upx;
		height: 14upx;
		border-radius: 50%;
		background-color: #24C985;
	}

	.home_top_tab_content_one_place_dot_ {
		display: block;
		width: 14upx;
		height: 14upx;
		border-radius: 50%;
		background-color: #FFAA23;
	}

	.home_top_tab_content_one_route_ps {
		/* border-top: 1upx solid rgba(0, 0, 0, 0); */
		margin-top: 28upx;
	}

	.home_top_tab_content_one_route_ps {
		padding-top: 28upx;
	}
	
	.list {
		padding-top: 28upx;
	}

	.home_top_tab_content_one_route_ps {
		padding-top: 0;
	}
	
	.list:nth-of-type(1) {
		padding-top: 0;
	}

	.home_top_tab_content_one_route {
		display: block;
		font-size: 26upx;
		color: #343434;
	}

	.home_top_tab_content_one_ps {
		display: block;
		font-size: 26upx;
		color: #343434;
		/* margin-top: 24upx; */
	}

	.user_all {
		padding: 30upx;
	}

	.user_head {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 45upx 0 43upx 0;
	}

	.user_avatar {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}

	.user_nickname {
		display: block;
		font-size: 34upx;
		color: #343434;
		line-height: 36upx;
		margin-top: 30upx;
	}

	.user_function_one {
		background-color: #FFFFFF;
		height: 110upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22upx;
		margin-bottom: 20upx;
	}

	.user_function_one_icon_title {
		display: flex;
		align-items: center;
	}

	.user_function_one_icon {
		width: 30upx;
		height: 30upx;
	}

	.user_function_one_title {
		display: block;
		font-size: 30upx;
		color: #343434;
		margin-left: 25upx;
	}

	.more_icon {
		width: 14upx;
		height: 24upx;
	}

	.popup_icon {
		width: 662upx;
		height: 917upx;
		border-radius: 20upx;
	}

	.share_all {
		width: 100upx;
		height: 100upx;
		position: absolute;
		right: 30upx;
		bottom: 0upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 100;
	}

	.share_icon {
		width: 40upx;
		height: 40upx;

	}

	.share_popup {
		position: relative;
		width: 562upx;
		height: 500upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.success_icon {
		width: 88upx;
		height: 88upx;
	}

	.share_tip {
		display: block;
		width: 290upx;
		font-size: 28upx;
		color: #343434;
		line-height: 50upx;
		text-align: center;
		margin: 40upx 0 50upx 0;
	}

	.share_btn {
		display: block;
		width: 340upx;
		height: 80upx;
		border-radius: 40upx;
		padding: 0;
		font-size: 28upx;
		line-height: 80upx;
	}

	.close_icon {
		position: absolute;
		width: 30upx;
		height: 30upx;
		right: 20upx;
		top: 15upx;
		opacity: 0.68;
	}

	.share_all_pic {
		position: absolute;
		left: -5000upx;
	}
	
	.popup_cell {
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 0 25upx 10upx 25upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.popup_cell_title {
		display: block;
		font-size: 32upx;
		color: #333333;
		line-height: 117upx;
	}
	
	.popup_cell_one {
		width: 590upx;
		height: 114upx;
		border-radius: 10upx;
		background-color: #F8F8F8;
		display: flex;
		align-items: center;
		margin-bottom: 35upx;
	}
	
	.popup_cell_one_icon {
		width: 50upx;
		height: 50upx;
		margin: 0 65upx 0 30upx;
	}
	
	.popup_cell_one_phone {
		display: block;
		font-size: 46upx;
		color: #5685F7;
	}
</style>
